//
//  QuadrantView.swift
//  ToDo4
//
//  Created by Jeyi Zhou on 2025/10/26.
//

import SwiftUI

struct QuadrantView: View {
    let quadrant: Quadrant
    let title: String
    let color: Color
    let todos: [TodoItem]
    let height: CGFloat
    let onTodoToggle: (TodoItem) -> Void
    let onTodoDelete: (TodoItem) -> Void
    let onTodoEdit: (TodoItem) -> Void
    let onTitleDoubleClick: () -> Void
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // 象限标题
            HStack {
                Text(title)
                    .font(.headline)
                    .fontWeight(.semibold)
                Spacer()
                Text("\(todos.count)")
                    .font(.caption)
                    .foregroundColor(.secondary)
                    .padding(.horizontal, 8)
                    .padding(.vertical, 4)
                    .background(color.opacity(0.2))
                    .cornerRadius(12)
            }
            .frame(maxWidth: .infinity)
            .contentShape(Rectangle())
            .onTapGesture(count: 2) {
                onTitleDoubleClick()
            }
            
            // Todo 列表
            ScrollView {
                LazyVStack(spacing: 8) {
                    if todos.isEmpty {
                        VStack(spacing: 8) {
                            Image(systemName: "tray")
                                .font(.title2)
                                .foregroundColor(.secondary)
                            Text("暂无任务")
                                .font(.caption)
                                .foregroundColor(.secondary)
                        }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .padding(.vertical, 20)
                    } else {
                        ForEach(todos) { todo in  // 显示所有任务
                            TodoRowView(
                                todo: todo,
                                onToggle: { onTodoToggle(todo) },
                                onDelete: { onTodoDelete(todo) },
                                onEdit: { onTodoEdit(todo) }
                            )
                            .frame(maxWidth: .infinity, alignment: .leading) // 确保每个任务行充满宽度
                        }
                    }
                }
                .padding(.vertical, 8)
                .frame(maxWidth: .infinity) // 确保列表充满宽度
            }
            .frame(maxHeight: height - 80) // 使用动态高度，减去标题区域高度
            .scrollIndicators(.visible) // 确保滚动条在需要时可见
            .scrollBounceBehavior(.basedOnSize) // 提供原生滚动体验
        }
        .padding(16)
        .background(
            RoundedRectangle(cornerRadius: 12)
                .fill(color.opacity(0.1))
                .overlay(
                    RoundedRectangle(cornerRadius: 12)
                        .stroke(color.opacity(0.3), lineWidth: 1)
                )
        )
        .frame(width: .infinity, height: height) // 使用传入的动态高度
    }
}

struct TodoRowView: View {
    let todo: TodoItem
    let onToggle: () -> Void
    let onDelete: () -> Void
    let onEdit: () -> Void
    
    var body: some View {
        HStack(alignment: .top, spacing: 12) {
            // 完成状态按钮
            Button(action: onToggle) {
                Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
                    .foregroundColor(todo.isCompleted ? .green : .gray)
                    .font(.title3)
            }
            .buttonStyle(PlainButtonStyle())
            
            // 任务内容
            VStack(alignment: .leading, spacing: 4) {
                Text(todo.title)
                    .font(.subheadline)
                    .fontWeight(.medium)
                    .strikethrough(todo.isCompleted)
                    .foregroundColor(todo.isCompleted ? .gray : .black)
                
                if !todo.description.isEmpty {
                    Text(todo.description)
                        .font(.caption)
                        .foregroundColor(todo.isCompleted ? .gray : .black)
                        .lineLimit(2)
                        .strikethrough(todo.isCompleted)
                }
                
                // 时间信息
                HStack {
                    Text("创建于 \(formatDate(todo.createdAt))")
                        .font(.caption2)
                        .foregroundColor(todo.isCompleted ? .gray : .black)
                    
                    if todo.updatedAt != todo.createdAt {
                        Text("· 更新于 \(formatDate(todo.updatedAt))")
                            .font(.caption2)
                            .foregroundColor(todo.isCompleted ? .gray : .black)
                    }
                }
            }
            
            Spacer()
            
            // 删除按钮
            Button(action: onDelete) {
                Image(systemName: "xmark.circle.fill")
                    .foregroundColor(.red)
                    .font(.caption)
            }
            .buttonStyle(PlainButtonStyle())
            .opacity(todo.isCompleted ? 1.0 : 0.6)
        }
        .padding(.vertical, 8)
        .padding(.horizontal, 12)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .fill(todo.isCompleted ? Color.gray.opacity(0.2) : Color.white.opacity(0.8))
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.gray.opacity(0.2), lineWidth: 0.5)
                )
        )
        .frame(maxWidth: .infinity, alignment: .leading)
        .onTapGesture(count: 2) {
            onEdit()
        }
    }
    
    private func formatDate(_ date: Date) -> String {
        let formatter = DateFormatter()
        formatter.dateStyle = .short
        formatter.timeStyle = .short
        return formatter.string(from: date)
    }
}

#Preview {
    HStack {
        QuadrantView(
            quadrant: .urgentImportant,
            title: "紧急重要",
            color: .red,
            todos: [
                TodoItem(title: "完成报告", description: "今天必须提交的月度报告", quadrant: .urgentImportant),
                TodoItem(title: "会议", description: "下午3点的团队会议", quadrant: .urgentImportant)
            ],
            height: 250,
            onTodoToggle: { _ in },
            onTodoDelete: { _ in },
            onTodoEdit: { _ in },
            onTitleDoubleClick: {}
        )

        QuadrantView(
            quadrant: .importantNotUrgent,
            title: "重要不紧急",
            color: .orange,
            todos: [],
            height: 250,
            onTodoToggle: { _ in },
            onTodoDelete: { _ in },
            onTodoEdit: { _ in },
            onTitleDoubleClick: {}
        )
    }
    .padding()
    .frame(width: 400, height: 300)
}
